<template>
<div>
  
  <button @click="comp = 'News'">新闻</button>
  <button @click="comp = 'Music'">音乐</button>
   <button @click="comp = 'Game'">游戏</button>
  <!-- 
    动态组件:我们可以通过components组件的is属性来决定渲染哪一个组件
        * component内置组件:渲染一个“元组件”为动态组件,依 is 的值，来决定哪个组件被渲染
        * is属性必须动态绑定,并且值是被动态加载的组件的名称
   -->
   <!-- 
      缓存组件:
        <keep-alive> 包裹动态组件时，默认会缓存所有不活动的组件实例，而不是销毁它们
          - include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
          - exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
          - max - 数字。最多可以缓存多少组件实例
     -->

     <!-- inClude的字符串写法，只限制一个 -->
   <!-- <keep-alive include="News">
     <component :is="comp"></component>
   </keep-alive> -->

        <!-- inClude的字符串写法，限制多个 -->
   <!-- <keep-alive include="News,Music">
     <component :is="comp"></component>
   </keep-alive> -->

        <!-- inClude的数组写法 -->
   <!-- <keep-alive :include="['News','Music']">
     <component :is="comp"></component>
   </keep-alive> -->

       <!-- include的正则写法 -->
    <!-- <keep-alive :include="/^News$/g">
      <component :is="comp"></component>
    </keep-alive> -->

        <!-- exclude的数组写法 -->
    <keep-alive :exclude="['News']" :max="4">
      <component :is="comp"></component>
    </keep-alive>




</div>
</template>


<script>
import News from "./componeents/News"
import Music from "./componeents/Music"
import Game from "./componeents/Game"


export default {
  name:"App",
  components:{
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp:"",
    }
  },

}
</script>

<style>

</style>